<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>geojsonLayer</title>

    <link rel="stylesheet" href="./lib/styles.css" />

    <script type="text/javascript" src="./lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="./lib/aircity/ac.min.js"></script>
  </head>
  <body>
    <div id="player"></div>

    <div class="btn-list">
      <div onclick="add_line()" class="btn">创建线图层</div>
      <div onclick="add_polygon()" class="btn">创建面</div>
      <div onclick="add_build()" class="btn">创建建筑</div>
      <div onclick="clearLayer()" class="btn">清除图层</div>
    </div>

    <script type="text/javascript">
      const dataPath = {
        polyline: '@path:图层及分析对象/geojson/路网.geojson',
        polygon: '@path:图层及分析对象/geojson/行政区划.geojson',
        build: '@path:图层及分析对象/geojson/建筑带z2.geojson'
      }

      const add_line = () => {
        let Renderer = {
          //默认符号化配置
          defaultSymbol: {
            //符号化类型枚举：0 simple-marker圆形点填充  1 simple-line线填充  2 simple-fill面填充 3 polygon3d填充
            symbolType: 1,
            //默认轮廓线
            outline: {
              //线宽
              width: 10
            },
            //默认填充颜色
            color: [1, 1, 0, 1]
          }
        }
        //用简单渲染器添加GeoJSONLayer
        fdapi.geoJSONLayer.add({
          id: 'geojson_polyline',
          visible: true, //加载后是否显示
          range: [0, 10000], //点的可视范围 注意：此参数仅对point类型的GeoJSON生效
          rotation: [0, 0, 0], //图层旋转
          offset: [0, 0, 0], //基于原始位置的偏移量
          needProject: false, //开启投影转换
          url: dataPath.polyline,
          collision: true, //开启碰撞
          onTerrain: true, // 是否贴地
          renderer: Renderer
        })

        fdapi.geoJSONLayer.focus('geojson_polyline', 10)
      }

      const add_polygon = () => {
        let Renderer = {
          //默认符号化配置
          defaultSymbol: {
            //符号化类型枚举：0 simple-marker圆形点填充  1 simple-line线填充  2 simple-fill面填充 3 polygon3d填充
            symbolType: 2,
            //填充色
            color: [1, 1, 1, 0.4],
            //轮廓线
            outline: {
              //线宽
              width: 1,
              //颜色
              color: [0.4, 0.4, 0.4, 0.1]
            }
          },
          rendererType: 1, // 0 简单渲染器  1 唯一值渲染器  2分类渲染器
          //材质样式
          // style: 11,
          type: 0, //控制显示的可视化类型枚举 0颜色 1 尺寸 2高度
          field: 'Name',
          uniqueValueInfos: [
            {
              value: '东区',
              symbol: {
                color: [92 / 255, 230 / 255, 37 / 255, 0.4]
              }
            },
            {
              value: '中西区',
              symbol: {
                color: [255 / 255, 64 / 255, 64 / 255, 0.4]
              }
            },
            {
              value: '南区',
              symbol: {
                color: [28 / 255, 202 / 255, 255 / 255, 0.4]
              }
            },
            {
              value: '湾仔区',
              symbol: {
                color: [255 / 255, 174 / 255, 0 / 255, 0.4]
              }
            }
          ]
        }

        //用分类渲染器添加GeoJSONLayer
        fdapi.geoJSONLayer.add({
          id: 'geojson_build',
          visible: true, //加载后是否显示
          rotation: [0, 0, 0], //图层旋转
          offset: [0, 0, 0], //基于原始位置的偏移量
          needProject: false, //开启投影转换
          textMarkerField: 'Name',
          textRange: [0, 1000000], //文字标注可见范围
          onTerrain: true, //是否贴地
          collision: true, //开启碰撞
          url: dataPath.polygon,
          renderer: Renderer
        })
        fdapi.geoJSONLayer.focus('geojson_build', 10)
      }

      const add_build = () => {
        //分类渲染器 按区间值范围进行分类符号化
        let Renderer = {
          rendererType: RendererType.ClassBreaksRenderer,
          //开启颜色范围插值
          gradient: false,
          //材质样式
          // style: 11,
          //默认符号化配置
          defaultSymbol: {
            //符号化类型枚举：0 simple-marker圆形点填充  1 simple-line线填充  2 simple-fill面填充 3 polygon3d填充
            symbolType: 3,
            //填充色
            color: [1, 1, 0, 1],
            //轮廓线
            outline: {
              //线宽
              width: 1,
              //颜色
              color: [0.4, 0.4, 0.4, 0.1]
            }
          },
          //按field高度属性拉高面
          visualVariables: [
            {
              //控制可视化显示的类型：高度
              type: VisualType.Height,
              //属性字段名称
              field: 'Elevation',
              //属性字段类型
              fieldType: FieldType.Number
            }
          ],
          //按属性取值分类着色
          field: 'Elevation',
          //属性字段类型
          fieldType: FieldType.Number,
          //控制可视化显示的类型：颜色
          type: VisualType.Color,
          //根据BLDG_HEIGH字段的不同区间值使用不同的符号化配置颜色
          classBreakInfos: [
            {
              minValue: 0,
              maxValue: 25,
              symbol: {
                color: [255 / 255, 0 / 255, 0 / 255, 1]
              }
            },
            {
              minValue: 25,
              maxValue: 50,
              symbol: {
                color: [193 / 255, 235 / 255, 233 / 255, 1]
              }
            },
            {
              minValue: 50,
              maxValue: 75,
              visible: true,
              symbol: {
                color: [51 / 255, 128 / 255, 174 / 255, 1]
              }
            },
            {
              minValue: 75,
              maxValue: 100,
              symbol: {
                color: [239 / 255, 237 / 255, 234 / 255, 1]
              }
            }
          ]
        }

        //用分类渲染器添加GeoJSONLayer
        fdapi.geoJSONLayer.add({
          id: 'geojson_build',
          visible: true, //加载后是否显示
          rotation: [0, 0, 0], //图层旋转
          offset: [0, 0, 0], //基于原始位置的偏移量
          needProject: false, //开启投影转换
          onTerrain: false, //是否贴地
          collision: true, //开启碰撞
          url: dataPath.build,
          renderer: Renderer
        })
        fdapi.geoJSONLayer.focus('geojson_build', 10)
      }

      const clearLayer = () => {
        fdapi.geoJSONLayer.clear()
      }
      /**
       * 初始化场景
       */
      const OnLoad = () => {
        const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, {
          domId: 'player',
          apiOptions: {
            // onReady: function () {
            //   fdapi.reset(2 | 4)
            // }
            onEvent: function (event) {
              const eventType = event.eventtype
              console.log('onEvent', event)
            }
          }
        })
      }

      /**
       * 自适应分辨率
       */
      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }

      // 页面加载调用
      window.addEventListener('load', OnLoad, true)

      // 页面窗口变换调用
      window.addEventListener('resize', onResize, true)
    </script>
  </body>
</html>
